<%@ page language="java"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>图片剪辑</title>    
	<meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
	<meta http-equiv="expires" content="0"/>    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
	<meta http-equiv="description" content="This is my page"/>
	<link rel="stylesheet" href="${pageContext.request.contextPath }/script/jquery/jcrop/jquery.Jcrop.css" type="text/css" />
	<script src="${pageContext.request.contextPath }/script/jquery/jcrop/jquery.Jcrop.js"></script>		
  </head>  
 <body >
 	
    <form name=form1 method=post action="${pageContext.request.contextPath }/upload/imgcut.shtml" onsubmit="return validateCallback(this, navTabAjaxDone);">
    	
    	<table width="60%" border="1" align="center" cellpadding="0" cellspacing="0" >    	   
           
            <tr>              
              <td id="imgTd" style="width:${param.width}px;height:${param.height}px;" align="center" style="padding-top:5px;">    
              	 <c:choose>
              	 	<c:when test="${param.tag eq 0}">
              	 		<img  src="${pageContext.request.contextPath }/${param.oldImgPath}" id="imgCrop" 
              	 		class="jcrop"	onChange="showPreview"	onSelect="showPreview"	aspectRatio="60/40" 
              	 		name="imgCrop" border="0" /> 
              	 	</c:when>
              	 	<c:when test="${param.tag eq 1}">
              	 		<img  src="${pageContext.request.contextPath }${param.imgName}" id="imgCrop" name="imgCrop" border="0" />  
              	 	</c:when>
              	 </c:choose>  
            </td> 
            <td>
            	 <c:choose>
              	 	<c:when test="${param.tag eq 0}">
              	 		 <div style="margin-left:10px;width:120px;height:80px;overflow:hidden;">
						    <img src="${pageContext.request.contextPath }/${param.oldImgPath}" id="preview" />
						 </div>
              	 	</c:when>
              	 	<c:when test="${param.tag eq 1}">
              	 		<div style="width:100px;height:100px;overflow:hidden;">
						    <img src="${pageContext.request.contextPath }/${param.imgName}" id="preview" />11
						 </div>  
              	 	</c:when>
              	 </c:choose>  
            </td>              
           </tr> 
             
            <tr>  
               <td colspan="2">
               	     <label>X1 <input type="text" size="4" id="labelX" name="labelX" /></label>
					<label>Y1 <input type="text" size="4" id="labelY" name="labelY" /></label>
					<label>X2 <input type="text" size="4" id="labelX2" name="labelX2" /></label>
					<label>Y2 <input type="text" size="4" id="labelY2" name="labelY2" /></label>
					<label>W <input type="text" size="4" id="labelW" name="labelW" /></label>
					<label>H <input type="text" size="4" id="labelH" name="labelH" /></label>
               </td>    
           </tr>
           
            <tr>  
               <td  colspan="2"><a href="index.jsp">返回上传图片</a></td>    
           </tr> 
                      
     </table>
    <div class="formBar">
		<ul>
			<li>
				<div class="buttonActive"><div class="buttonContent"><button type="submit" id="cropTd">保存</button></div></div>
			</li>
        		<li>
              		<div class="button"><div class="buttonContent"><button type="button" class="close">取消</button></div></div>
			</li>
	 	</ul>
	</div>
	
	<input type="hidden"  id="x" name="x" />
	<input type="hidden"  id="y" name="y" />
	<input type="hidden"  id="x2" name="x2" />
	<input type="hidden"  id="y2" name="y2" />
	<input type="hidden"  id="w" name="w" />
	<input type="hidden"  id="h" name="h" />  
	
	<!-- 源图片宽度和高度 -->
	<input type="hidden"  id="width" name="width" value="${param.width}"/>  
	<input type="hidden"  id="height" name="height" value="${param.height}"/>
	<input type="hidden"  id="oldImgPath" name="oldImgPath" value="${param.oldImgPath}"/>  
	<input type="hidden"  id="imgRoot" name="imgRoot" value="${param.imgRoot}"/>	
	<input type="hidden"  id="imgFileExt" name="imgFileExt" value="${param.imgFileExt}"/>	
	
    </form>
  </body>
</html>
<script type="text/javascript">
$(function(){
	
	jQuery('#cropButton').click(function(){
	    var x = jQuery("#x").val();
		var y = jQuery("#y").val();
		var w = jQuery("#w").val();
		var h = jQuery("#h").val();			
		
		if(w == 0 || h == 0 ){
			alert("您还没有选择图片的剪切区域,不能进行剪切图片!");
			return;
		}	
		alert("你要剪切图片的X坐标: "+x + ",Y坐标: " + y + ",剪切图片的宽度: " + w + ",高度：" + h );
		if(confirm("确定按照当前大小剪切图片吗")){				
			document.form1.submit();
		}
 	});
});

var imgwidth = '${param.width}';
var imgheight = '${param.height}';
// Our simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showPreview(coords)
{
	if (parseInt(coords.w) > 0)
	{
		var rx = 120 / coords.w;
		var ry = 80 / coords.h;

		jQuery('#preview').css({
			width: Math.round(rx * imgwidth) + 'px',
			height: Math.round(ry * imgheight) + 'px',
			marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			marginTop: '-' + Math.round(ry * coords.y) + 'px'
		});
		//alert(Math.round(rx * coords.x)+" "+Math.round(ry * coords.y));
	}
	jQuery('#x').val(coords.x);
	jQuery('#y').val(coords.y);
	jQuery('#x2').val(coords.x2);
	jQuery('#y2').val(coords.y2);
	jQuery('#w').val(coords.w);
	jQuery('#h').val(coords.h);	
	
	jQuery('#labelX').val(coords.x);
	jQuery('#labelY').val(coords.y);
	jQuery('#labelX2').val(coords.x2);
	jQuery('#labelY2').val(coords.y2);
	jQuery('#labelW').val(coords.w);
	jQuery('#labelH').val(coords.h);	
	
	//显示剪切按键
	jQuery('#cropTd').css("display","");
}
</script>
